<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <script src="../js/vue.js"></script>
        <style>
            .v-enter {
                opacity: 0;
                margin-left: 500px;
            }
            .v-enter-to{
                opacity: 1;
            }
            .v-enter-active{
                transition: all 3s;
            }

            .v-leave{
                opacity: 1;
            }
            .v-leave-to{
                opacity: 0;
            }
            .v-leave-active{
                transition: all 3s;
                margin-left: 500px;
            }
        </style>
    </head>
    <body>
        <div id="app">
            
            <button @click="toggle">切换</button>
            <!-- 可以通过keep-alive来保存动态组件的状态 -->
            <transition mode="out-in">
                <keep-alive>
                    <component v-bind:is="name"></component>
                </keep-alive>
            </transition>
            
        </div>
        <template id="home1">
            <div>
                这个是组件1
            </div>
        </template>
        <template id="home2">
            <div>
                这个是组件2
            </div>
        </template>
        <script>

            Vue.component(
                "home2",
                {
                    template: "#home2",
                }
            )
            Vue.component(
                "home1",
                {
                    template: "#home1",
                }
            )

            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"home1",
                    isShow:true

                },
                methods: {
                    toggle() {
                        // this.isShow = !this.isShow;
                        this.name = this.name === "home1" ? "home2":"home1"
                    }
                },
            });
        </script>
    </body>
</html>